<script setup>
import { ref } from 'vue';
import MapViewer from './MapViewer/index.vue';
import MapEditor from './MapEditor/index.vue';

const land = ref(null);
const data = ref({
  // 缩放
  scale: {
    min: 1, // 最小缩放比例
    max: 10, // 最大缩放比例
    step: 0.2, // 缩放步长
    scaling: 1.7, // 缩放比例
  },
  // 背景
  background: {
    src: '/map.jpg',
    width: 1186,
    height: 2000,
    offsetX: 63,
    offsetY: 68,
  },
  // 遮罩
  wrapper: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  // 地块
  stages: [
    {
      code: '01',
      border: ['30,30', '100,30', '100,100', '100,30'],
    },
  ],
});

/** @事件 点击土地 */
function onStage({ sn, isTop, isLeft, isShow }) {
  if (isShow) {
    land.value.style.display = 'block';
    land.value.style.top = isTop ? 'auto' : '20px';
    land.value.style.bottom = isTop ? '20px' : 'auto';
    land.value.style.left = isLeft ? 'auto' : '30px';
    land.value.style.right = isLeft ? '30px' : 'auto';
    land.value.innerHTML = `<span>我是土地${sn}号</span>`;
  } else {
    land.value.style.display = 'none';
  }
  console.log('onStage', { sn, isTop, isLeft });
}

</script>

<template>
  <main>
    <div class="render">
      <MapViewer :data="data" @stage="onStage"/>
      <div class="stage" ref="land">我是土地?号</div>
    </div>
    <div class="editor">
      <MapEditor v-model:data="data"/>
    </div>
  </main>
</template>

<style scoped>
main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  user-select: none;
}
.editor {
  width: calc(100vw - 360px);
  height: 500px;
  margin: 20px;
  flex: 1;
}
.render {
  position: relative;
  width: 300px;
  height: 500px;
  flex-shrink: 0;
  margin-left: 20px;
}
.render2 {
  position: relative;
  width: 380px;
  height: 500px;
  flex-shrink: 0;
  margin-left: 20px;
}
.stage {
  display: none;
  position: absolute;
  width: 80px;
  height: 180px;
  font-size: 32px;
  border-radius: 8px;
  text-align: center;
  user-select: none;
  background-color: #21ff8e;
  color: #178c00;
  top: 20px;
  left: 30px;
}
</style>
